import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta title="API Reference/TypeScript" id="api-typescript" />

# TypeScript

React Data Table is built with TypeScript so typings are buit in. First, we'll need to define our data type (or interface):

```ts
import DataTable, { TableColumn } from 'react-data-table-component';

interface DataRow {
	title: string;
	director: string;
	year: string;
}
```

Alternatively, if you want to define `DataRow` as a type:

```ts
import DataTable, { TableColumn } from 'react-data-table-component';

type DataRow = {
	title: string;
	director: string;
	year: string;
};
```

Next, we'll create our columns definitions. `TableColumn` is an interface representing a column definition.
`TableColumn` takes a generic parameter `<T>`. By passing `TableColumn<DataRow>[]` (columns is an array) we now have access to our `dataRow` props on any property in our table `columns` that accesses our data:

```ts
const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];
```

Finally, we'll implement our TypeScript component that uses `DataTable`:

```ts
function MyComponent(): JSX.Element {
	return <DataTable columns={columns} data={data} />;
}
```

Or, if you prefer using `React.FC`:

```ts
const MyComponent: React.FC = () => {
	return <DataTable columns={columns} data={data} />;
};
```

Putting it all together:

```ts
import DataTable, { TableColumn } from 'react-data-table-component';

interface DataRow {
	title: string;
	director: string;
	year: string;
}

const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

function MyComponent(): JSX.Element {
	return <DataTable columns={columns} data={data} />;
}

export default MyComponent;
```

## Types

In addition to `TableColumn` we can also access various other React Data Table types.

The following are going to be the most commonly used and accept a generic `T` parameter, which will always be your data's type or interface:

- `TableColumn<T>`
- `TableProps<T>`
- `ConditionalStyles<T>`
- `ExpanderComponentProps<T>`
- `PaginationComponentProps`

The following types are available for advanced or niche use cases:

- `TableRow`
- `TableStyles`
- `Theme`
- `Themes`
- `PaginationOptions`
- `PaginationServerOptions`
- `ContextMessage`
- `SortOrder`
